<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <script>
        function tanchuang(){
            var username=document.getElementById('username').value;
            var password=document.getElementById('password').value
//            window.alert("用户名是"+username);
//            window.alert("密码是"+password);
            document.getElementById('result').append("用户名是"+username);
            document.getElementById('result').innerHTML+="<br>";
        }
    </script>
</head>

<body>
    <form style="border:solid;text-align : right;width: 400px">
        <label>用户名：</label>
        <input id="username" type="text">
        <br>
        <label>密码：</label>
        
        <input id="password"  type="text" style="password">
        <br>
        <!-- 单选按钮 -->
        <label>性别:</label>
        <input type="radio" id="male" name="gender" value="male" checked>
        <label for="male">男</label>
        <input type="radio" id="female" name="gender" value="female">
        <label for="female">女</label>

        <br>

        <!-- 复选框 -->
        <input type="checkbox" id="subscribe" name="subscribe" checked>
        <label for="subscribe">订阅推送信息</label>

        <br>

        <!-- 下拉列表 -->
        <label for="country">国家:</label>
        <select id="country" name="country">
            <option value="cn">CN</option>
            <option value="usa">USA</option>
            <option value="uk">UK</option>
        </select>

        <br>
        <input type="reset">
        
        <!-- 提交按钮 -->
        <input type="button" value="提交" onclick="tanchuang()"/>

    </form>
    <div id="result" style="border:solid;width: 400px;height: 400px;margin-top: 20px;overflow: scroll">输出结果：<br></div>
</body>
</html>
